import React, {useEffect, useState} from 'react';
import {View, Text, TouchableOpacity, Image} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import Swiper from 'react-native-swiper';
import px2dp from '../../utils/px2dp';
/* 组件 */
import AreaView from '../../components/Layout/AreaView';
/* 样式 */
import styles from './style';
import {submitPaper} from '../../service/common';

const AnswerReport = (props) => {
  const {
    route: {
      params: {
        apId,
        epTitle,
        rightCount,
        aswQuestions
      },
    },
  } = props;
  /* 自定义头部 */
  const navigation = useNavigation();
  const [data, setData] = useState({}); // 答案数据
  useEffect(() => {
    navigation.setOptions({
      title: '答题报告',
      headerRight: () => {
        return (
          <TouchableOpacity
            onPress={() => navigation.replace('Simulation')}
            style={{
              width: px2dp(148),
              height: px2dp(42),
              backgroundColor: '#FFAF26',
              borderRadius: px2dp(21),
              marginRight: px2dp(36),
              marginTop: px2dp(22),
            }}>
            <Text
              style={{
                fontSize: px2dp(20),
                color: '#fff',
                textAlign: 'center',
                lineHeight: px2dp(42),
              }}>
              下一个知识点
            </Text>
          </TouchableOpacity>
        );
      },
    });

    console.log(aswQuestions, 'aswQuestions');
    submitPaper({
      apId,
      aswQuestions
    }).then((res)=>{
      console.log(res, 'submitPaper');
      setData(res.data);
    });
  }, []);
  return (
    <AreaView>
      <View style={styles.ans}>
        <View style={styles.ans_header}>
          <Text>答题报告：{epTitle}{apId}</Text>
        </View>
        <View style={styles.accuracy}>
          <Image
            source={require('../../assets/images/answer_report.png')}
            style={styles.accuracy_icon}
          />
          <Text style={styles.accuracy_text}>
            {/* 19% 显示的正确率 */}
            {data?.apScore || 0}%
          </Text>
        </View>
        <View style={styles.topic}>
          <View style={[styles.topic, styles.topic_left]}>
            <Image
              source={require('../../assets/images/dui.png')}
              style={styles.topic_icon}
            />
            <Text style={styles.topic_text}>答对题数：{isNaN(data?.epQstNum - rightCount) ? '-' : rightCount || 0}</Text>
          </View>
          <View style={[styles.topic, styles.topic_right]}>
            <Image
              source={require('../../assets/images/cuo.png')}
              style={styles.topic_icon}
            />
            <Text style={styles.topic_text}>答错题数：{isNaN(data?.epQstNum - rightCount) ? '-' : (data?.epQstNum - rightCount)}</Text>
          </View>
        </View>
        <TouchableOpacity  activeOpacity={1} style={styles.restart}
          onPress={()=> {
            // navigation.push('LabelDetail', {
            //   epId,
            // });
            navigation.goBack(-2);
          }}
        >
          <Text style={styles.restart_text}>重新练习</Text>
        </TouchableOpacity>
        <Text
          style={{
            fontSize: px2dp(16),
            color: '#666',
            marginLeft: 'auto',
            marginRight: 'auto',
          }}>
          注：文字、论述等题目不计入成绩
        </Text>
      </View>
      <View style={[styles.answer_sheet, {display: 'none'}]}>
        <View style={styles.ans}>
          <Text style={{fontSize: px2dp(18), color: '#999'}}>
            <Text
              style={{fontSize: px2dp(24), fontWeight: 'bold', color: '#333'}}>
              答题卡
            </Text>
            (点击题号可查看解析)
          </Text>
          <View style={[styles.flex, styles.mt20]}>
            <View style={[styles.flex, styles.aj, styles.mr40]}>
              <View style={[styles.kuai, {backgroundColor: '#1BD5B1'}]} />
              <Text style={{fontSize: px2dp(18), color: '#666'}}>答对</Text>
            </View>
            <View style={[styles.flex, styles.aj, styles.mr40]}>
              <View style={[styles.kuai, {backgroundColor: '#EB0029'}]} />
              <Text style={{fontSize: px2dp(18), color: '#666'}}>答错</Text>
            </View>
            <View style={[styles.flex, styles.aj, styles.mr40]}>
              <View style={[styles.kuai, styles.flex]}>
                <View
                  style={[
                    styles.span1,
                    {
                      backgroundColor: '#1BD5B1',
                      height: px2dp(18),
                      borderTopLeftRadius: px2dp(4),
                      borderBottomLeftRadius: px2dp(4),
                    },
                  ]}
                />
                <View
                  style={[
                    styles.span1,
                    {
                      backgroundColor: '#EB0029',
                      borderTopRightRadius: px2dp(4),
                      borderBottomRightRadius: px2dp(4),
                    },
                  ]}
                />
              </View>
              <Text style={{fontSize: px2dp(18), color: '#666'}}>半对</Text>
            </View>
            <View style={[styles.flex, styles.aj]}>
              <View
                style={[styles.kuai, {borderColor: '#EB0029', borderWidth: 1}]}
              />
              <Text style={{fontSize: px2dp(18), color: '#666'}}>无判断</Text>
            </View>
          </View>
          <View style={[styles.mt53]}>
            <Text style={[styles.fw, styles.f24]}>单选题</Text>
            <View style={styles.flex}>
              <View style={[styles.single_choice, styles.bj_eb]}>
                <Text style={[styles.single_choice_text]}>1</Text>
              </View>
            </View>
          </View>
          <View style={[styles.mt53]}>
            <Text style={[styles.fw, styles.f24]}>多选题</Text>
            <View style={styles.flex}>
              <View style={[styles.single_choice, styles.bj_1d]}>
                <Text style={[styles.single_choice_text]}>1</Text>
              </View>
            </View>
          </View>
        </View>
      </View>
    </AreaView>
  );
};

export default AnswerReport;
